<template>
    <view class="page-main">
        <nextindexedxlist :dataList="dataList" :showAvatar="true" :isInterlock="true" @itemclick="itemclick">
            <!--这是默认插槽,额外添加部分-->
            <!--    <view class="content-block">
                <view class="title"><text>历史记录:</text></view>
                <view class="btn"><text>朝阳区</text></view>
                <view class="btn"><text>东城区</text></view>
                <view class="btn"><text>海淀区</text></view>
            </view> -->
        </nextindexedxlist>
		
    </view>
	<div class="box">
		<div class="tz">
			<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>
		</div>
		<div class="tz">
			<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>
		</div>
		<div class="tz">
			<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>
		</div>
		<div class="tz">
			<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>
		</div>
		<div class="tz">
			<u-icon name="account-fill" color="#fefefe" size="28"></u-icon>
		</div>
		<div class="tzs">
			<u-icon name="plus-circle" color="#cccccc" size="45"></u-icon>
		</div>
		<div class="qt">确定(5)</div>
	</div>
</template>

<script setup lang="ts">
	import nextindexedxlist from '@/components/select-practitioner/select-practitioner.vue'
    import { ref } from "vue";
    // 通讯录数据形式
    const dataList = ref([{
        id: '1',
        name: '公司部门',
        phone: '181****5576',
        img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
    }, {
        id: '2',
        name: '同事收藏夹',
        phone: '181****5576',
        img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
    }, {
        id: '3',
        name: '员工姓名',
        phone: '181****5576',
        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '4',
        name: '员工姓名',
        phone: '181****5576',
        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '5',
        name: '员工姓名',
        phone: '181****5576',
        img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
    }, {
        id: '6',
        name: '员工姓名',
        phone: '181****5576',
        img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
    }, {
        id: '7',
        name: '员工姓名',
        phone: '181****5576',
        img: 'https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '8',
        name: '杨**',
        phone: '181****5576',
        img: 'https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '9',
        name: '张**',
        phone: '18198045576',
        img: 'https://img2.baidu.com/it/u=2638426337,2608406797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '10',
        name: '李**',
        phone: '181****1176',
        img: 'https://img2.baidu.com/it/u=2638426337,2608406797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '11',
        name: '陈**',
        phone: '153****5576',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
    }, {
        id: '12',
        name: '李**',
        phone: '131****5576',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
    }, {
        id: '13',
        name: '唐**',
        phone: '181****3476',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
    }, {
        id: '14',
        name: '刘**',
        phone: '181****5576',
        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '15',
        name: '秦**',
        phone: '181****5576',
        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
    }, {
        id: '16',
        name: '朱**',
        phone: '181****5576',
        img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
    }])

    // 地址数据形式
    // const dataList = ref([{
    //  "id": 6,
    //  "code": "110101000000",
    //  "name": "东城区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "DC",
    //  "deleted": 0
    // }, {
    //  "id": 10,
    //  "code": "110105000000",
    //  "name": "朝阳区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "CY",
    //  "deleted": 0
    // }, {
    //  "id": 13,
    //  "code": "110106000000",
    //  "name": "丰台区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "FT",
    //  "deleted": 0
    // }, {
    //  "id": 14,
    //  "code": "110107000000",
    //  "name": "石景山区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "SJS",
    //  "deleted": 0
    // }, {
    //  "id": 15,
    //  "code": "110108000000",
    //  "name": "海淀区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "HD",
    //  "deleted": 0
    // }, {
    //  "id": 16,
    //  "code": "110109000000",
    //  "name": "门头沟区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "MTG",
    //  "deleted": 0
    // }, {
    //  "id": 19,
    //  "code": "110111000000",
    //  "name": "房山区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "FS",
    //  "deleted": 0
    // }, {
    //  "id": 20,
    //  "code": "110112000000",
    //  "name": "通州区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "TZ",
    //  "deleted": 0
    // }, {
    //  "id": 21,
    //  "code": "110113000000",
    //  "name": "顺义区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "SY",
    //  "deleted": 0
    // }, {
    //  "id": 22,
    //  "code": "110114000000",
    //  "name": "昌平区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "CP",
    //  "deleted": 0
    // }, {
    //  "id": 23,
    //  "code": "110115000000",
    //  "name": "大兴区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "DX",
    //  "deleted": 0
    // }, {
    //  "id": 25,
    //  "code": "110116000000",
    //  "name": "怀柔区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "HR",
    //  "deleted": 0
    // }, {
    //  "id": 26,
    //  "code": "110117000000",
    //  "name": "平谷区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "PG",
    //  "deleted": 0
    // }, {
    //  "id": 27,
    //  "code": "110118000000",
    //  "name": "密云区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "MY",
    //  "deleted": 0
    // }, {
    //  "id": 28,
    //  "code": "110119000000",
    //  "name": "延庆区",
    //  "parentCode": "110100000000",
    //  "level": 3,
    //  "abbr": "YQ",
    //  "deleted": 0
    // }])
    function itemclick(e) {
        console.log('点击列表回调：', e)
    }
</script>
<style lang="scss">
	.box{
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		.tz{
			width: 80rpx;
			height: 80rpx;
			background-color: #cccccc;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}
		.tzs{
			width: 80rpx;
			height: 80rpx;
			// background-color: #cccccc;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}
		.qt{
			background-color: #0079fe;
			border-radius: 40rpx;
			padding: 10rpx 10rpx;
			color: white;
		}
	}
    .content-block {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color: #fff;
        .title {
            color: #333;
            padding: 20rpx;
            margin-right: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .btn {
            color: #ccc;
            padding: 10rpx;
            border: 1rpx solid #ccc;
            border-radius: 10rpx;
            margin: 20rpx 10rpx;
            font-size: 28rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
    }
</style>